<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	<body>
		<div id="app">
			<!--鼠标事件-->
			<div @mouseover="mouseOver"
                 @mouseleave="mouseLeave"  v-html="flag">这里可以漂浮鼠标</div>
				
				<h1> 根据分数评级 </h1>
				<input v-model="score"  type="text" /><br />
				<span  v-if="score>=90">优秀</span>
				<span  v-else-if="score>=80">良</span>
				<span  v-else-if="score>=60">及格</span>
				<span  v-else>不及格</span>
				
			
		</div>
		
		
		
		
		<script  src="../js/vue.js"></script>
		<script>
		const  app=new  Vue({
			el: "#app",
			data: {
				name: "vue案例" ,
				url: "https://www.baidu.com/",
				flag: '这里可以漂浮数据',
				score:  0
			},
			methods:{
				mouseOver(){
					this.flag="<h1>鼠标过来了</h1>"
				},
				mouseLeave(){
					this.flag="<h1>鼠标离开了</h1>"
				}
			}
		})
		</script>
		
	</body>
	
	
	
	
</html>
